<template>
<div class="count">
<h2>当前求和为:{{sum}},放大十倍后:{{bigSum}}</h2>
  <h2>学校:{{school}},地址:{{address}},大写{{upperSchool}}</h2>
   <select v-model.number="n"><!--用户选中n-->
    <option value="1">1</option><!--value前加:也能转换为number响应式-->
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <button @click="add">加</button>
  <button @click="minus">减</button>
</div>
</template>

<script setup lang="ts" name="Count">
import {reactive, ref,toRefs} from "vue";
import {storeToRefs} from "pinia";
//使用useCountStore 得到一个专门保存count相关的store
import  {userCountStore} from "@/store/count";

let n=ref(1)//用户选中数字
//初始化reactive 对象 countStore
const countStore=userCountStore()
// const {sum,school,address}=toRefs(countStore)//会把所有的搞成Ref类型
//storeToRefs只会关注store中数据，不会对对方进行ref包裹
const {sum,school,address,bigSum,upperSchool}=storeToRefs(countStore)
// console.log("!!!",storeToRefs(countStore))
// console.log('@@@',countStore.sum)

//method
function add(){
  //第一种修改方式 sum爆红在webstorm不用管
  // countStore.sum+=1
  // countStore.school='大学'
  // countStore.address='北京'
  // 第二种修改方式
  // countStore.$patch({
  //   sum:888,
  //   school:'大学',
  // })
  //第三种修改方式
  countStore.increment(n.value)

}
function minus(){
countStore.sum-=n.value
}
</script>

<style scoped>
.count{
  background-color: deepskyblue;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px;
}
select,button{
  margin: 0 5px;
  height: 25px;
}
</style>